<template>
  <Layout style="background:#f0f2f5;">

    <Row>
      <Col span="18" offset="3">

        <div style="padding: 20px 0;">
          <Card style="background:#fff;">
            <Row>
              <Col span="12" style="text-align: left;">
                <Cascader :data="DateInit" transfer v-model="selectDate" :load-data="ttrees" :render-format="format"
                          :clearable="false" change-on-select @on-change="changeDate"
                          style="width: 200px; display: inline-block;"></Cascader>
                <Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy-MM-dd') }"
                        @click="changeDate(new Date().format('yyyy-MM-dd'))">今日
                </Button>
                <Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy-MM') }"
                        @click="changeDate(new Date().format('yyyy-MM'))">本月
                </Button>
                <Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy') }"
                        @click="changeDate(new Date().format('yyyy'))">今年
                </Button>
              </Col>
              <Col span="12" style="text-align: right;">
                <Cascader v-model="spaceSelect" :data="ensTreeData" transfer :clearable="false" change-on-select @on-change="changeWorkSpace"
                          style="width: 400px; display: inline-block;"></Cascader>
              </Col>
            </Row>
          </Card>
        </div>

        <div style="padding-bottom: 20px;">
          <Row class-name="TopIndex_block">

            <Col span="6" class-name="TopIndex_block_item" v-for="(item, index) in SummaryList" :key="index">
              <Card :bordered="false"
                    :class="{ active: cardActive == item.type,'Clickable': Clickable.indexOf(item.type) != -1}">
                <div @click="WaterTypeClick(item.type)">
                  <p>{{item.type}}</p>
                  <h1>{{item.useNum}}<span>{{item.unit}}</span></h1>
                  <Row class-name="TopIndex_block_item_row" v-if="item.lastPeriod">
                    <Col span="12">
                      环比&nbsp;<Icon type="md-arrow-dropup" size="24" color="#86d270"
                                    v-if="item.lastPeriod.indexOf('-')!=0"/>
                      <Icon type="md-arrow-dropdown" size="24" color="red" v-if="item.lastPeriod.indexOf('-')==0"/>&nbsp;{{item.lastPeriod.substr(1)}}
                    </Col>
                    <Col span="12">
                      KPI&nbsp;<Icon type="md-arrow-dropup" size="24" color="#86d270" v-if="item.kpi.indexOf('-')!=0"/>
                      <Icon type="md-arrow-dropdown" size="24" color="red" v-if="item.kpi.indexOf('-')==0"/>&nbsp;{{item.kpi.substr(1)}}
                    </Col>
                  </Row>
                  <img src="/static/img/u310.png" v-if="!item.lastPeriod"/>
                </div>
              </Card>
            </Col>

          </Row>
        </div>

        <div style="padding-bottom: 20px;">
          <Row>
            <Col span="18">
              <Card :bordered="false">
                <p slot="title">用水走势</p>
                <chart-line style="height: 288px;" :barObj="chartLineData"/>
              </Card>
            </Col>

            <Col span="6">
              <Card :bordered="false">
                <p slot="title">子级占比/排名</p>
                <ranking-List :BasicData="BasicData"></ranking-List>
              </Card>
            </Col>
          </Row>
        </div>

        <div style="padding-bottom: 20px;">
          <Row>
            <Col span="12" style="padding-right: 10px;">
              <Card :bordered="false">
                <p slot="title">同类对比</p>
                <Table size="small" height="232" :columns="sameCompareTableConfig.sameCompareColumns"
                       page-size-opts="[5, 10, 20, 30]" @on-sort-change="onSortChange"
                       :data="sameCompareTableConfig.sameCompareData"></Table>
                <Page :total="sameCompareTableConfig.totals" size="small"
                      :page-size="sameCompareTableConfig.sameCompare.size" @on-page-size-change="pageSizeChange"
                      @on-change="changePage" :page-size-opts="[5,10]" class-name="sameCompare_table" show-elevator
                      show-sizer/>
              </Card>
            </Col>
            <Col span="12" style="padding-left: 10px;">
              <Card :bordered="false">
                <p slot="title">类型占比/排名</p>
                <chart-pie style="height: 270px;" :value="typePercent"></chart-pie>
              </Card>
            </Col>
          </Row>
        </div>

        <div style="padding-bottom: 20px;">
          <Row>
            <Col span="18">
              <Card :bordered="false">
                <p slot="title">过往对比</p>
                <chart-bar style="height: 288px;" :barObj="barObj"/>
              </Card>
            </Col>

            <Col span="6">
              <Card :bordered="false">
                <p slot="title">过往排名</p>
                <ranking-List :BasicData="BasicData"></ranking-List>
              </Card>
            </Col>
          </Row>
        </div>

      </Col>
    </Row>
  </Layout>
</template>

<script>
  import {ChartPie, ChartBar, ChartLine} from '@/components/waterCharts'
  import RankingList from '@/components/common/rankingList'

  export default {
    name: 'aggregateWater',
    components: {
      ChartPie,
      ChartBar,
      ChartLine,
      RankingList
    },
    data: function () {
      return {
        spaceSelect: [],
        summaryType: '2',
        buttonSize: 'large',
        CarbonType: '0',
        DateInit: [],
        selectDate: [], // 日期三级联动的时间（格式为数组）
        isActiveDate: '', // 当前选择的时间（格式为字符串）
        SummaryList: Array,
        BasicData: [],
        sameCompareTableConfig: {
          sameCompare: {
            time: this.isActiveDate,
            page: 1,
            size: 5,
            sortByColumn: '',
            type: '0',
            workSpace: ''
          },
          // 同类对比表格表头配置
          sameCompareColumns: [
            {
              title: '排名',
              type: 'index'
            },
            {
              title: '企业',
              key: 'name',
              className: 'table-info-column'
            },
            {
              title: '总量(kg)',
              key: 'useNum'
            },
            {
              title: '年涨幅',
              key: 'increase',
              sortable: 'custom',
              render: (h, params) => {
                return h('div', [
                  h('strong', params.row.increase),
                  h('Icon', {
                    props: {
                      type: params.row.increase.indexOf('-') != 0 ? 'ios-arrow-round-up' : 'ios-arrow-round-down',
                      color: params.row.increase.indexOf('-') != 0 ? '#86d270' : 'red',
                      size: '24'
                    }
                  })
                ])
              }
            }
          ],
          sameCompareData: [],
          sameCompareRow: 5
        },
        // 类型占比/排名
        typePercent: [],
        // xxx汇总碳排-- 过往对比/过往排名
        barObj: {},
        chartLineData: {},
        cardActive: '总用水',
        Clickable: '总用水单车用水',
        ensTreeData: [],
        workSpaceString: '电-HD1-HD1总电表（测试）'
      }
    },
    created: function () {
      let self = this
      self.yearCalculation(2015, 15)
      self.selectDate.push(new Date().format('yyyy')) // 时间初始化
      self.isActiveDate = self.selectDate.join('-')
      self.sameCompareTableConfig.sameCompare.time = self.isActiveDate
      self.sameCompareTableConfig.sameCompare.type = self.CarbonType
      self.ensTree()
      self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
      self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
      self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
      self.post_carbon_sameCompare()
      self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
      self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
    },
    methods: {
      // 年份计算
      yearCalculation: function (initYear, number) {
        let self = this
        for (let i = 0; i <= number; i++) {
          let obj = {}
          obj.value = initYear + i
          obj.value = obj.value.toString()
          obj.label = initYear + i + '年'
          obj.children = []
          obj.loading = false
          self.DateInit.push(obj)
        }
      },
      // 年份获取月份和天
      ttrees: function (item, callback) {
        item.loading = true
        window.myapi.ttrees({year: '2019'}).then((res) => {
          if (res.data.status === 200) {
            item.children = res.data.data[0].children
            item.loading = false
            callback()
          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // 车间选择  树形数据
      ensTree: function () {
        let self = this
        window.myapi.ensTree({type: '成本', factory: 'ZZ'}).then(function (res) {
          if (res.data.status === 200) {
            self.ensTreeData = res.data.data
            self.spaceSelect.push(res.data.data[0].value)
            // self.carbon_allin_list = res.data.data
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // 车间改变
      changeWorkSpace: function (workSpace, selectedData) {
        let self = this
        let str = ''
        for (let i = 0; i < selectedData.length; i++) {
          if (!i) {
            str = selectedData[i].label
          } else {
            str = str + '-' + selectedData[i].label
          }
        }
        self.workSpaceString = str
        self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
        self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_sameCompare()
        self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
      },
      // 用水类型改变
      WaterTypeClick: function (type) {
        let self = this
        // console.log(self.Clickable.indexOf(type))
        if (self.Clickable.indexOf(type) != -1) {
          self.cardActive = type
          self.CarbonType = type === '总用水' ? '0' : '1'
          self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
          self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
          self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
          self.post_carbon_sameCompare()
          self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
          self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
        }
      },
      // xxx汇总碳排--总碳排,单车碳排,总产量,平均温度
      post_carbon_allCarBon: function (time, workSpace, summaryType) {
        let self = this
        window.myapi.carbons_allCarBon({
          time: time,
          workSpace: workSpace,
          summaryType: this.summaryType
        }).then(function (res) {
          if (res.data.status === 200) {
            self.SummaryList = res.data.data
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // xxx汇总碳排-- 碳排走势
      post_carbon_carbonTrend: function (time, type, workSpace) {
        let self = this
        window.myapi.carbon_carbonTrend({time: time, type: type, workSpace: workSpace}).then(function (res) {
          if (res.data.status === 200) {
            let x = {
              xAxisData: res.data.data.xData,
              yieldData: res.data.data.yLeft,
              carbonData: res.data.data.yRight
            }
            self.chartLineData = x
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // xxx汇总碳排-- 子级占比排名
      post_carbon_carbonTrendSon: function (time, type, workSpace) {
        let self = this
        window.myapi.carbon_carbonTrendSon({time: time, type: type, workSpace: workSpace}).then(function (res) {
          if (res.data.status === 200) {
            self.BasicData = res.data.data
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // xxx汇总碳排-- 同类对比
      post_carbon_sameCompare: function () {
        let self = this
        self.sameCompareTableConfig.sameCompare.time = self.isActiveDate
        self.sameCompareTableConfig.sameCompare.type = self.CarbonType
        self.sameCompareTableConfig.sameCompare.workSpace = self.workSpaceString
        window.myapi.carbon_sameCompare(this.sameCompareTableConfig.sameCompare).then(function (res) {
          if (res.data.status === 200) {
            self.sameCompareTableConfig.sameCompareData = res.data.data.content
            self.sameCompareTableConfig.totals = res.data.data.totalElements
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // xxx汇总碳排-- 类型占比/排名
      post_carbon_typePercent: function (time, type, workSpace, summaryType) {
        let self = this
        window.myapi.carbon_typePercent({
          time: time,
          type: type,
          workSpace: workSpace,
          summaryType: this.summaryType
        }).then(function (res) {
          if (res.data.status === 200) {
            self.typePercent = res.data.data.datas
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // xxx汇总碳排-- 过往对比/过往排名
      post_carbon_lastCompare: function (time, type, workSpace) {
        let self = this
        window.myapi.carbon_lastCompare({time: time, type: type, workSpace: workSpace}).then(function (res) {
          if (res.data.status === 200) {
            // console.log(res.data);
            self.barObj = res.data.data
          } else {

          }
        }).catch(function (e) {
          // console.log(e);
        })
      },
      // 表格重新排序
      onSortChange: function (e) {
        let self = this
        self.sameCompareTableConfig.sameCompare.sortByColumn = e
        self.post_carbon_sameCompare()
      },
      // 分页处理函数---切换每页条数时的回调，返回切换后的每页条数
      pageSizeChange: function (e) {
        let self = this
        self.sameCompareTableConfig.sameCompare.size = e
        self.post_carbon_sameCompare()
      },
      // 分页处理函数---页码改变的回调，返回改变后的页码
      changePage: function (e) {
        let self = this
        self.sameCompareTableConfig.sameCompare.page = e
        self.post_carbon_sameCompare()
      },
      // 时间改变-----具体时间/今日/本月/今年
      changeDate: function (Datetime) {
        let self = this
        if (typeof (Datetime) === 'string') {
          self.isActiveDate = Datetime
          self.selectDate = Datetime.split('-')
        } else {
          self.isActiveDate = Datetime.join('-')
        }
        self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
        self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_sameCompare()
        self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
        self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
      },
      // 选择后展示的函数，用于自定义显示格式
      format (labels, selectedData) {
        let str = ''
        for (let i = 0; i < selectedData.length; i++) {
          if (!i) {
            str = selectedData[i].value
          } else {
            str = str + ' - ' + selectedData[i].value
          }
        }
        return str
      }
    }
  }
</script>

<style scoped>
  .TopIndex_block {
    margin-left: -10px;
    margin-right: -10px;
    color: #777;
  }

  .TopIndex_block .TopIndex_block_item {
    padding-left: 10px;
    padding-right: 10px;
  }

  .TopIndex_block .TopIndex_block_item .Clickable {
    cursor: pointer;
  }

  .TopIndex_block .TopIndex_block_item .active {
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    border-color: #eee;
    background-color: #f3f3f3;
  }

  .TopIndex_block .TopIndex_block_item h1 {
    font-weight: 400;
    padding: 15px 15%;
    color: #000;
  }

  .TopIndex_block .TopIndex_block_item h1 span {
    font-weight: 200;
    font-size: 16px;
    color: rgba(150, 150, 150, 0.847058823529412);
    margin-left: 10%;
  }

  .TopIndex_block .TopIndex_block_item img {
    width: 100%;
    height: 40px;
    display: block;
  }

  .TopIndex_block .TopIndex_block_item .TopIndex_block_item_row {
    text-align: center;
    line-height: 40px;
  }

  .ivu-table-wrapper {
    border: none;
  }

  /deep/ .ivu-table::after {
    width: 0px !important;
  }

  .ivu-table td {
    width: 0px !important;
  }

  .ivu-table td.table-info-column {
    color: #2d8cef;
  }

  .sameCompare_table {
    text-align: center;
    margin-top: 15px;
  }

  /deep/ .ivu-table th, /deep/ .ivu-table td {
    text-align: center;
  }

  /*滚动条样式*/
  /deep/ .ivu-table-overflowY::-webkit-scrollbar {
    width: 6px;
    height: 1px;
  }

  /deep/ .ivu-table-overflowY::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    background: #888;
  }

  /deep/ .ivu-table-overflowY::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    background: #EDEDED;
  }

</style>
